<script>
import Editor from '@tinymce/tinymce-vue'

export default {
  components: {
    Editor
  },
  // model:{
  //   prop: 'fatherValue',  // 父组件v-model绑定的值传递给props中的fatherValue
  //   event: 'childDataChange'
  // },
  props: {
    modelValue: String
  },
  data() {
    return {
      text: ''
    }
  },
  mounted() {
    this.text = this.modelValue
  },
  methods: {},
  watch: {
    text(value) {
      this.$emit('update:modelValue', value)
    },
    modelValue(value) {
      this.text = value
    }
  }
}
</script>

<template>
  <main id="sample">
    <Editor
        v-model="text"
        api-key="ckvredxeplcye6nu0icm4zxvrjcqcov3koldz9oatk1f7rmz"
        tinymceScriptSrc="/tinymce/tinymce.js"
        :init="{
        language:'zh_CN',
        plugins: 'lists link image table code help wordcount',
        width: 1000,
        branding: false,
        menubar: false,
        toolbar: [ //数组写法
        'undo redo  | cut copy paste | forecolor backcolor bold italic underline strikethrough link | styleselect  fontselect fontsizeselect | bullist numlist | subscript superscript removeformat |    table image media  hr pagebreak  insertdatetime print   preview anchor | fullscreen  | charmap wordcount restoredraft help',
        'alignleft  aligncenter  alignright alignjustify outdent indent'
    ]
      }"
    />
  </main>
</template>

<style scoped>


@media (min-width: 1024px) {
  #sample {
    display: flex;
    flex-direction: column;
    place-items: center;
    width: 1000px;
  }
}
</style>